<template>
  <div class="bubbleIndex">
    <div class="wrap">
      <transition name="hide">
        <div v-if="bubbleStatus" class="bubble" @click="getYanzhi">
          <p>收取</p>
          <p class="yanzhi">{{bubbleValue}}颜值</p>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import {getYanzhi} from '@/api/request'
import { mapState, mapMutations } from "vuex";
export default {
  name: "Bubble",
  data() {
    return {
      isRunning: false
    }
  },
  props: {
    bubbleValue:{
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapState({
      bubbleStatus: "bubbleStatus"
    })
  },
  methods: {
    getYanzhi() {
      if (this.isRunning) {
        return
      }
      this.isRunning = true
      getYanzhi({}).then(res => {
        this.$parent.getSleepDetail()
        setTimeout(() => {
          this.isRunning = false
        }, 1000)
      }).catch(e => {
        this.$toastMessage({message: e.message, time: 3000})
        this.$parent.getSleepDetail()
        setTimeout(() => {
          this.isRunning = false
        }, 1000)
      })
    }
  }
};
</script>
<style lang="less" scoped>
.bubbleIndex {
  width: 100%;
  height: 50%;

  .bubble {
    width: 1.46rem;
    height: 1.46rem;
    border-radius: 0.73rem;
    box-shadow: inset 0px 0px 20px 0px #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: jump 3s linear infinite;
    position: absolute;
    bottom: 8rem;
    left: 50%;
    z-index: 1000;

    > p {
      text-align: center;
      font-size: 0.33rem;
      color: #fff;
    }
    .yanzhi {
      font-size: 0.26rem;
    }
  }
  .hideBubble {
    animation: hide 1s linear 1;
  }
  @keyframes hide {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(1rem);
    }
  }
  @keyframes jump {
    0% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(4px);
    }
    50% {
      transform: translateY(0);
    }
    75% {
      transform: translateY(-4px);
    }
    100% {
      transform: translateY(0);
    }
  }
  .hide-enter-active {
    animation: hide 1s reverse;
  }
  .hide-leave-active {
    animation: hide 1s;
  }
}
</style>
